<template>
  <div class="params-view">
    <div class="tit">参数</div>
    <NodeTree :isLoading="isLoading" class="node-tree" ref="nodeTreeRef" :data="nodeData" @updateForm="handleUpdate" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { NodeTree } from "mctp-platform/src/components/index";
import type { nodeItem } from "mctp-platform/src/components/index";
import { updateTestCaseConfig } from "../../api/test/index";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const route = useRoute();
const props = withDefaults(defineProps<{ caseId?: string }>(), { caseId: "" });
const isLoading = ref(false); // 配置加载状态
const nodeData = ref<nodeItem[]>([]); // 配置数据
const getConfigData = (data: nodeItem[]) => {
  nodeData.value = data || [];
};
/**
 * @description: 更新配置
 * @return {*}
 */
const handleUpdate = async () => {
  updateTestCaseConfig({ caseId: props.caseId || "", config: nodeData.value }, { taskId: route.query.taskId });
  ElMessage.success("参数更新成功");
};
defineExpose({ getConfigData });
</script>
<style scoped lang="scss">
.params-view {
  .tit {
    padding: 0 16px;
    font-weight: bold;
    height: 32px;
    line-height: 32px;
    background-color: #f4f4f4;
    border: 1px solid #eaeaea;
    border-bottom: 0;
  }

  .node-tree {
    height: calc(100% - 33px);
  }
}
</style>
